<template>
  <div class="main-page">
    <PageSearch :search-form-config="searchFormConfig" :form-data.sync="formData" @searchBtnClick="handleSearch" />
    <el-row type="flex" justify="end">
      <el-button type="primary" size="medium" @click="createImg">
        新增轮播图片
      </el-button>
    </el-row>
    <PageContent ref="pageContent" :form-data="formData" :content-table-config="contentConfig" @selectionChange="selectionChange">
      <template #status="{ row }">
        {{ row.status == 0 ? '未发布' : '已发布' }}
      </template>
      <template #url="{ row }">
        <el-image style="width: 100px; height: 50px" :src="row.url" :preview-src-list="[row.url]">
        </el-image>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" icon="el-icon-circle-check" @click="handleRelease(row)">
          发布
        </el-button>
        <el-button type="text" size="small" icon="el-icon-setting" @click="handleLease(row)">
          关闭
        </el-button>
        <el-button type="text" size="small" icon="el-icon-delete" @click="handleDel(row)">
          删除
        </el-button>
      </template>
    </PageContent>
    <swiperInfo ref="swiperInfo" :init-params="initParams" :show.sync="dialogVisible" :btn-loading="btnLoading" @submit-data="handleSubmit">
    </swiperInfo>
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import swiperInfo from "./swiperInfo.vue";
import { policyEdit, policyDelete } from "@/api/system";
export default {
  name: "Swiper",
  components: {
    swiperInfo,

  },
  data() {
    return {
      contentConfig,
      searchFormConfig,
      formData: {},
      selectionList: [],
      dialogVisible: false,
      fileList: [],
      initParams: {},
      btnLoading: false,
    }
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    selectionChange(selection) {
      this.selectionList = selection;
    },
    handleDel(row) {
      console.log(row);
      this.$confirm('是否确认删除？')
        .then(() => {
          policyDelete(row.id)
            .then(() => {
              this.$message.success("操作成功");
              this.$refs.pageContent.queryTblMain();
            })
            .finally(() => {
            });
        })
        .catch(() => { });
    },
    handleRelease(row) {
      this.$confirm('是否确认发布？')
        .then(() => {
          row.status = 1
          policyEdit(row)
            .then(() => {
              this.$message.success("操作成功");
              this.$refs.pageContent.queryTblMain();
            })
            .finally(() => {
            });
        })
        .catch(() => { });
    },
    handleLease(row) {
      this.$confirm('是否确认关闭？')
        .then(() => {
          row.status = 0
          policyEdit(row)
            .then(() => {
              this.$message.success("操作成功");
              this.$refs.pageContent.queryTblMain();
            })
            .finally(() => {
            });
        })
        .catch(() => { });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    createImg(row) {
      this.initParams = {
        row,
        cb: (params) => {
          this.handleConfirm(params);
        },
      };
      this.dialogVisible = true;
    },
    handleConfirm(params) {
      this.btnLoading = true;
      policyEdit(params)
        .then(() => {
          this.dialogVisible = false;
          this.$message.success("操作成功");
          this.$refs.pageContent.queryTblMain();
          this.handleSubmit();
        })
        .finally(() => {
          this.btnLoading = false;
        });
    },
    handleSubmit() {
      this.$refs.swiperInfo.handleParentResponse(true)
    },
  },
}
</script>

<style scoped>
</style>
